@layer reset, variable, support, demo;

@layer demo {
  li {
    margin-block: 0;
    a {
      text-decoration: none;
      color: #393A35;
      text-align: left;
    }
  }

  ul {
    list-style: none;
    &:hover a {
      opacity: 0.8;
      transform: scale(0.97);
    }
    a {
      display: block;
      position: relative;
      padding: 2rem 1rem 1rem;
      transition: transform 0.22s, box-shadow 0.22s;
      border-bottom: 2px dotted #387581;
      user-select: none;
      box-shadow: 0 0 0 -0.25rem rgba(0, 0, 0, 0.1);
      font-size: large;
      &:hover {
        outline: 0;
        box-shadow: 0 0.5rem 0 -0.25rem rgba(0, 0, 0, 0.1);
        opacity: 1;
        transform: scale(1.03);
        transition: transform 0.088s, box-shadow 0.088s;
        z-index: 1;
      }
    }
  }

  .menu li {
    background-color: #F3F6F0;
      a:hover {
        cursor: pointer;
      }
    }
  }

  .animated {
    animation-duration: 1s;
    animation-fill-mode: both;
  }

  @keyframes flipInX {
    0% {
      transform: perspective(400px) rotateX(90deg);
      opacity: 0;
    }
    40% {
      transform: perspective(400px) rotateX(-10deg);
    }
    70% {
      transform: perspective(400px) rotateX(10deg);
    }
    100% {
      transform: perspective(400px) rotateX(0deg);
      opacity: 1;
    }
  }

  .flipInX {
    backface-visibility: visible !important;
    animation-name: flipInX;
  }


@layer variable {
  :root {
    --blue-light: #1e90ff;
    --blue-dark: #005cb8;
  }
}

@layer support {
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0; 
  }

  html {
    block-size: 100%;
  }

  body {
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    background: #d8ecf2;
    color: rgba(67, 83, 99, 1);
    background-image: url('../assets/background.jpeg');
    /* background-size: cover; */
    background-position: center;
    /* background-repeat: no-repeat; */
  }

  .container {
    text-align: center;
    max-inline-size: 47rem;
    margin-inline: auto;
  }
  .heading{
    text-align: center;
    background-color: #94B4B0;
    margin: 30px 0px;
    width: 100%;
  }
  h2 {
    padding: 1.8rem 0;
    font-size: 2.8rem;
    text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.4);
    color: #000203;
  }

  nav {
    flex: auto;
    position: relative;
  }
}

@media (max-width: 728px){
    ul{
        padding: 10px;
    }
}